<template>
  <div>
    <el-container>
      <el-header
        id="resultInfo"
        style="width: 100%;height: 300px;"
      >
        <el-container>
          <el-aside>
            <div
              id="dataInfo"
              style="width: 100%;height: 100px;"
            >
              Report Name: {{ run_result.report_name }}
              <br>
              Report ID: {{ run_result.report_id }}
            </div>
            <div
              id="platformInfo"
              style="width: 100%;height: 200px;"
            >
              <el-tag
                v-for="(value,key) in run_result.platform"
                :key="key"
                type="info"
              >{{ key }}: {{ value }} <br>
              </el-tag>
            </div>
          </el-aside>
          <el-main>
            <div id="resultStat" style="width: 50%;height: 250px;" />
          </el-main>
        </el-container>
      </el-header>
      <el-container>
        <el-container style="border: 5px solid #eee">
          <el-aside
            id="casesList"
            width="350px"
            style="background-color: white;border: 5px solid #eee"
          >
            <el-table
              :data="run_result.case_list"
              @row-click="rowClick"
            >
              <el-table-column
                prop="name"
                label="用例名称"
                min-width="80%"
                show-overflow-tooltip
              />
              <el-table-column
                prop="success"
                label="结果"
                min-width="20%"
              >
                <template slot-scope="scope">
                  <div v-if="scope.row.success === true">
                    <el-button type="success" size="mini" icon="el-icon-check" circle />
                  </div>
                  <div v-else>
                    <el-button type="danger" size="mini" icon="el-icon-close" circle />
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </el-aside>
          <el-container>
            <el-header id="caseSummary" height="150px" style="background-color: white">
              <div style="font-size:20px;line-height:2">
                <span :v-show="run_result.cases.name">{{ run_result.cases.name }}</span>
              </div>
              <br>
              <div>
                <el-tag effect="dark">{{ run_result.cases.time.start_at }}</el-tag>
                <el-tag type="success" effect="dark">{{ $common.formatNumber(run_result.cases.time.duration) }} seconds</el-tag>
              </div>
              <br>
              <div>Step Cases Total -
                Pass: {{ run_result.cases.stat.successes }} ;
                Fail: {{ run_result.cases.stat.failures }} ;
                Error: {{ run_result.cases.stat.errors }} ;
                Skip: {{ run_result.cases.stat.skipped }} ;
              </div>
            </el-header>
            <el-main id="caseStepsDetail" style="font-size: 16px;background-color: white;">
              <el-table
                :data="run_result.cases.records"
                style="width: 100%"
              >
                <el-table-column
                  type="expand"
                  min-width="100%"
                >
                  <template slot-scope="props">
                    <el-form
                      label-position="left"
                      inline
                      class="demo-table-expand"
                    >
                      <el-form-item label="url">
                        <span style="text-align:left; line-height:18px;">{{ props.row.meta_datas.data[0].request.url }}</span>
                      </el-form-item>
                      <el-form-item label="method">
                        <span>{{ props.row.meta_datas.data[0].request.method }}</span>
                      </el-form-item>
                      <el-form-item label="status_code">
                        <span>{{ props.row.meta_datas.data[0].response.status_code }}</span>
                      </el-form-item>
                      <el-form-item label="Request Headers">
                        <span v-for="(value,key) in props.row.meta_datas.data[0].request.headers" :key="key">
                          {{ key }}: {{ value }}
                        </span>
                      </el-form-item>
                      <el-form-item label="Response Headers">
                        <span v-for="(value,key) in props.row.meta_datas.data[0].response.headers" :key="key">
                          {{ key }}: {{ value }} <br>
                        </span>
                      </el-form-item>
                      <el-form-item label="Validators">
                        {{ props.row.meta_datas.validator }}
                        <el-table
                          class="child-table"
                          :data="props.row.meta_datas.validators"
                          style="width: 100%"
                          :show-header="false"
                          :row-class-name="validatorClassName"
                        >
                          <el-table-column
                            prop="check"
                            label="检查项"
                            width="15%"
                          />
                          <el-table-column
                            prop="check_value"
                            label="实际值"
                            width="30%"
                          />
                          <el-table-column
                            prop="comparator"
                            label="比较器"
                            width="25%"
                          />
                          <el-table-column
                            prop="expect"
                            label="预期值"
                            width="30%"
                          />
                        </el-table>
                      </el-form-item>
                    </el-form>
                  </template>
                </el-table-column>
                <el-table-column
                  label="步骤用例名称"
                  prop="name"
                  min-width="80%"
                />
                <el-table-column
                  label="结果"
                  prop="status"
                  min-width="20%"
                />
              </el-table>
            </el-main>
          </el-container>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { runTest } from '@/api/run/table'
import * as echarts from 'echarts'

export default {
  data() {
    return {
      fullscreenLoading: false,
      getinfo_flag: false,

      run_data: {
        type: '',
        id: '',
        cfg_id: ''
      },
      JsonText: '',
      run_result: {
        report_name: 'Loading',
        report_id: 0,
        success: true,
        stat: {
          passed: 100,
          failed: 50,
          total: 150
        },
        case_list: [
          {
            name: 'Loading',
            success: true
          }
        ],
        cases: {
          name: 'Loading',
          base_url: '',
          stat: {
            total: 0,
            failures: 0,
            errors: 0,
            skipped: 0,
            expectedFailures: 0,
            unexpectedSuccesses: 0,
            successes: 0
          },
          records: [
            {
              name: 'Loading',
              status: 'pass'
            }
          ], // case steps
          time: {
            start_at: 0,
            duration: 0
          }
        }
      }
    }
  },
  created() {
    this.run_data.type = this.$route.query.type
    this.run_data.id = this.$route.query.id
    this.run_data.cfg_id = this.$route.query.cfg_id
  },
  mounted() {
    this.report_init()
    this.account = this.getLocalValue('account')
  },
  methods: {
    openFullScreen() {
      const loading = this.$loading({
        lock: true,
        text: '运行测试中，请稍后...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      setTimeout(() => {
        loading.close()
      }, 20000)
    },

    run_test: function() {
      const screenloading = this.$loading({
        lock: true,
        text: '运行测试中，请稍后...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })

      var data = {}
      data['type'] = this.run_data.type
      data['id'] = this.run_data.id
      data['cfg_id'] = this.run_data.cfg_id
      data['result_type'] = 1

      runTest(data).then(response => {
        this.JsonText = response.data

        screenloading.close()
      })
    },
    initEcharts() {
      const resultStatOption = {
        title: {
          text: '运行结果',
          x: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          bottom: 'bottom'
        },
        series: [
          {
            name: '选项内容',
            type: 'pie',
            radius: '55%',
            center: ['50%', '50%'], // 位置
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            data: [
              { value: 1048, name: 'Passed' },
              { value: 735, name: 'Failed' }
            ]
          }
        ]
      }
      // 基于准备好的dom，初始化echarts实例
      const resultStatChart = echarts.init(document.getElementById('resultStat'))
      // 绘制图表
      resultStatChart.setOption(resultStatOption)
      // 随着屏幕大小调节图表
      window.addEventListener('resize', () => {
        resultStatChart.resize()
      })
    },
    async report_init() {
      const screenloading = this.$loading({
        lock: true,
        text: '运行测试中，请稍后...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      // echarts.init(document.getElementById("resultStat")).showLoading()
      const resultStatChart = echarts.init(document.getElementById('resultStat'))

      var data = {}
      data['type'] = this.run_data.type
      data['id'] = this.run_data.id
      data['cfg_id'] = this.run_data.cfg_id
      data['result_type'] = 1

      runTest(data).then(response => {
        this.JsonText = response.data
        this.run_result.report_name = response.data.report_name
        this.run_result.report_id = response.data.report_id
        this.run_result.platform = response.data.platform
        this.run_result.stat.passed = response.data.stat.testcases.success
        this.run_result.stat.failed = response.data.stat.testcases.fail
        this.run_result.case_list = response.data.details
        this.run_result.cases = this.run_result.case_list[0]

        screenloading.close()
        console.log(this.run_result.case_list)
        console.log(this.run_result.cases)

        // echarts.init(document.getElementById("resultStat")).hideLoading()
        const resultStatOption = {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: '5%',
            left: 'center'
          },
          series: [
            {
              name: 'Run Test Result',
              type: 'pie',
              radius: ['40%', '70%'],
              color: ['#67C23A', '#F56C6C'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
              },
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: 40,
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: [
                { value: this.run_result.stat.passed, name: 'Passed' },
                { value: this.run_result.stat.failed, name: 'Failed' }
              ]
            }
          ]
        }
        resultStatChart.setOption(resultStatOption)

        // 随着屏幕大小调节图表
        window.addEventListener('resize', () => {
          resultStatChart.resize()
        })
      })
    },

    rowClick: function(row) {
      this.run_result.cases = row
      console.log(this.run_result.cases.name)
      console.log(this.run_result.cases)
      console.log(this.run_result.cases.records)
    },

    validatorClassName: function({ row }) {
      if (row.check_result === 'pass') {
        return 'validator-pass-row'
      } else if (row.check_result === 'fail') {
        return 'validator-fail-row'
      }
      return ''
    }
  }
}
</script>

<style type="text/css">

  .demo-table-expand .el-form-item__content {
    width: calc(100% - 100px);
  }

    html,body,#app,.el-container {
      /*外部间距也是如此设置*/
      margin: 0;
      /*设置内部填充为0，几个布局元素之间没有间距*/
      padding: 0;
      /*统一设置高度为100%*/
      height:100%;
    }

  .el-header {
    background-color: #D3DCE6;
    color: #333;
    text-align: left;
    line-height: 20px;
  }

  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: left;
  }

  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: left;
    line-height: 20px;
  }

  body > .el-container {
    margin-bottom: 40px;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }

  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 100%;
  }
  .child-table table {
    width: 100% !important;
  }
  .el-table .validator-fail-row {
    background: #F56C6C;
  }

  .el-table .validator-pass-row {
    background: #f0f9eb;
  }
</style>
